import React, { useState, useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useSelector } from "react-redux";
import { NavBar, InfiniteScroll, Switch } from "antd-mobile";
import http from "../../utils/http";
// 引入切换日期的组件
import MyNavDate from "../../components/MyNavDate";
import styles from "./index.module.css";

const Index = () => {
  //获取地址栏查询参数
  const navigate = useNavigate();
  const { start, end, date } = useSelector((state) => state.CitySlice);
  const [sq, setSq] = useSearchParams();
  const isSped = sq.get("isSpeed");
  //定义查询参数：page 分页  isSeat 是否选择座位 isDesc 是否降序
  const [page, setPage] = useState(1);
  const [isSeat, setIsSeat] = useState(false);
  const [isDesc, setIsDesc] = useState(false);
  const [isSpeed, setIsSpeed] = useState(isSped);
  //定义列表数据
  const [QueryList, setQueryList] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  //请求数据的方法
  const getQueryList = async () => {
    const res = await http.post("/api/trip/train", {
      start,
      end,
      date,
      page,
      isSpeed,
      isSeat,
      isDesc,
    });

    const { code, data } = res.data;
    if (code === 200) {
      setQueryList([...QueryList, ...data]);
      setPage((pre) => pre + 1);
    }

    if (data.length === 0) {
      setHasMore(false);
    }
  };

  useEffect(() => {
    getQueryList();
  }, []);

  //跳转到详情页
  const handelToDetail = (id) => {
    navigate(`/detail/${id}`);
  };

  return (
    <div>
      <NavBar onBack={() => navigate("/")}>
        <p className={styles.list_tit}>
          {start} <span>→</span> {end}
        </p>
      </NavBar>
      {/* 调用切换日期的组件 */}
      <MyNavDate date={date}></MyNavDate>
      {/* 车次列表渲染 */}
      <div className={styles.list_container}>
        {QueryList.length > 0 &&
          QueryList.map((item, ind) => (
            <div
              key={ind}
              className={styles.listItem}
              onClick={() => handelToDetail(item.id)}
            >
              <div className={styles.item_left}>
                <span>{item.start}</span>
                <span>{item.end}</span>
                <span>{item.startTime}</span>
                <span>
                  一等座 <b>有票</b>
                </span>
                <span>
                  二等座 <b>有票</b>
                </span>
                <span>
                  商务座 <b>有票</b>
                </span>
              </div>
              <div className={styles.item_right}>
                <span>￥{item.tick.secondTick}</span>
              </div>
            </div>
          ))}
      </div>
      <InfiniteScroll loadMore={getQueryList} hasMore={hasMore} />
      <div className={styles.filterList}>
        <div>
          <Switch
            checked={isSpeed}
            onChange={(val) => {
              setIsSpeed(val);
              setPage(1);
              setQueryList([]);
            }}
          />
          是否高铁
        </div>
        <div>
          <Switch
            checked={isSeat}
            onChange={(val) => {
              setIsSeat(val);
              setPage(1);
              setQueryList([]);
            }}
          />
          是否有票
        </div>
        <div>
          <Switch
            checked={isDesc}
            onChange={(val) => {
              setIsDesc(val);
              setPage(1);
              setQueryList([]);
            }}
          />
          升序降序
        </div>
      </div>
    </div>
  );
};

export default Index;
